<template>
  <template ref="headerRef"><HeaderComponent @add-plan="updatePlan" @search="params.planName = $event; $refs.tableRef.request(params)" /></template>
  
  <cus-condition :node-list="conditionList" @submit="params = { ...params, ...$event }; $refs.tableRef.request(params)" />

  <cus-table :auto-request="false" ref="tableRef" url="/admin/teachPlan/queryPage">
    <el-table-column prop="planName" label="计划名称" />
    <el-table-column prop="subjectName" label="科目" width="100" />
    <el-table-column prop="gradeName" label="年级" width="100" />
    <el-table-column prop="semesterName" label="学期" width="100" />
    <el-table-column prop="courseTypeName" label="班型" width="110" />
    <el-table-column prop="stuTypeName" label="学生层次" width="100" />
    <el-table-column label="发布状态" width="100">
      <template #default="{ row }">
        <cus-state :state="row.publishStatus" success-text="已发布" error-text="未发布" @on-click="stateChange(row.publishStatus, row.id)" />
      </template>
    </el-table-column>
    <el-table-column prop="modifyTime" label="更新时间" width="160" />
    <el-table-column label="操作" width="140">
      <template #default="{ row }">
        <el-button type="text" @click="updatePlan(row)">编辑</el-button>
        <el-button type="text" @click="remove(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </cus-table>
</template>

<script lang="ts">
import { onMounted, ref, Ref, reactive } from 'vue';
import HeaderComponent from './components/header.vue';
import UpdateComponent from './update/index.vue';
import $ from '$';
import { ElMessageBox, ElMessage } from 'element-plus';
import { CusTable } from '@/components'

const conditionList = [
  { label: '年级', key: 'gradeId' },
  { label: '学期', key: 'semesterId' },
  { label: '班型', key: 'courseTypeId' },
  { label: '学生层次', key: 'stuTypeId' }
]

export default {
  components: { HeaderComponent },
  setup() {
    let headerRef = ref(null);
    let tableRef: Ref<CusTable | undefined> = ref();

    onMounted(() => $.emitter.emit('slot', headerRef));

    let params = reactive<any>({ });

    $.emitter.emit('effect', (subjectId) => {
      params.subjectId = subjectId;
      setTimeout(() => tableRef.value!.request(params) );
    })

    const updatePlan = async (planInfo?) => {
      $.screen.create(UpdateComponent, { planInfo }).finally(() => tableRef.value!.request() )
    }

    const remove = async (id) => {
      await ElMessageBox.confirm('确定删除此教学计划吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' });
      let res = await $.http.post(`/admin/teachPlan/deleteById/${id}`);
      ElMessage[res.result ? 'success' : 'warning'](res.result ? '删除成功' : '操作失败');
      res.result && tableRef.value!.request();
    }

    const stateChange = async (state, id) => {
      let publishStatus = Number(!state);
      let res = await $.http.post('/admin/teachPlan/saveOrUpdate', { publishStatus, id });
      let text = publishStatus ? '发布' : '取消发布'
      ElMessage[res.result ? 'success' : 'warning'](text + (res.result ? '成功' : '失败'));
      res.result && tableRef.value!.request();
    }

    return { headerRef, tableRef, conditionList, params, updatePlan, remove, stateChange }
  }
}

</script>

<style lang="scss" scoped>

</style>